﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Adventures</title>
    <link rel="stylesheet" href="../css/db.css" />
    <style>
        body
        {
            width: 800px;
        }
        #list
        {
            width: 800px;
        }
        .wrap
        {
            margin: 20px;
            float: left;
            width: 226px;
            height: 176px;
        }
        .wrap2
        {
            width: 203px;
            height: 151px;
            margin-left: 3px;
            margin-top: 3px;
            box-shadow: 10px 10px 5px #888888;
        }
        .wrap:hover .wrap2
        {
            width: 206px;
            height: 155px;
            box-shadow: 20px 20px 15px #888888;
        }
        
        .wrap:hover iframe
        {
            -moz-transform: scale(0.255, 0.255);
            -webkit-transform: scale(0.255, 0.255);
            -o-transform: scale(0.255, 0.255);
            -ms-transform: scale(0.255, 0.255);
            transform: scale(0.255, 0.255);
            -moz-transform-origin: top left;
            -webkit-transform-origin: top left;
            -o-transform-origin: top left;
            -ms-transform-origin: top left;
            transform-origin: top left;
        }
        iframe
        {
            -moz-transform: scale(0.25, 0.25);
            -webkit-transform: scale(0.25, 0.25);
            -o-transform: scale(0.25, 0.25);
            -ms-transform: scale(0.25, 0.25);
            transform: scale(0.25, 0.25);
            -moz-transform-origin: top left;
            -webkit-transform-origin: top left;
            -o-transform-origin: top left;
            -ms-transform-origin: top left;
            transform-origin: top left;
        }
    </style>
    <script type="text/javascript" src="../js/track.js"></script>
</head>
<body>
    <div>
        <a class="home" href="../main.xhtml">
            <img alt="home" src="../img/home.png" /></a>
    </div>
    <div id="list">
    </div>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/db.js"></script>
    <script type="text/javascript">
        $(function () {
            for (var i = 1; i <= db.totalCountsNum; i++)
                $("#list").append('<div class="wrap"><div class="wrap2"><iframe src="' + i + '.xhtml?p=1" height="620" width="820" scrolling="no" frameborder="0"></iframe></div></div>');
        });
    </script>
</body>
</html>
